<template>
	<div>
		<commons-alert :dismissCountDown="dismissCountDown" :variant="variant" @alert-dismissed="alertDismissed">{{message}}</commons-alert>
		<page-title>媒体文件详情</page-title>
		<b-container fluid class="mt-3">
			<b-row>
				<b-col cols="7" class="image-area">
					<b-link :href="media.url" target="_blank">
						<img v-if="media.wasImage" :src="media.url" />
						<span v-else>不是图片，不能进行预览。</span>
					</b-link>
				</b-col>
				<b-col cols="5">
					<b-container fluid>
						<b-row>
							<b-col cols="12" class="readonly-area">
								<div>
									<span class="label-bolder">文件名:</span>
									<span>{{media.fileName}}</span>
								</div>
								<div>
									<span class="label-bolder">文件类型:</span>
									<span>{{media.fileType}}</span>
								</div>
								<div>
									<span class="label-bolder">上传于:</span>
									<span>{{formatDateTime(media.uploadTime)}}</span>
								</div>
								<div>
									<span class="label-bolder">文件大小:</span>
									<span>{{hFileSize(media.fileSize)}}</span>
								</div>
								<div v-if="media.wasImage">
									<span class="label-bolder">分辨率:</span>
									<span>{{media.fileWidth}} x {{media.fileHeight}}像素</span>
								</div>
								<div>
									<span class="label-bolder">URL:</span>
									<span>
										<b-link :href="media.url" target="_blank">
											{{media.url}}
										</b-link>
									</span>
								</div>
							</b-col>
						</b-row>
						<b-row>
							<b-col cols="12">
								<hr/>
							</b-col>
						</b-row>
						<b-row>
							<b-col cols="12">
								<b-form-group label="替代文本" label-for="alt-elem">
									<b-form-input id="alt-elem" v-model="media.alt" placeholder="替代文本"></b-form-input>
								</b-form-group>
								<b-form-group label="标题" label-for="title-elem">
									<b-form-input id="title-elem" v-model="media.title" placeholder="标题"></b-form-input>
								</b-form-group>
								<b-form-group label="说明" label-for="remark-elem">
									<b-form-textarea id="remark-elem" v-model="media.remark" placeholder="说明" rows="3"></b-form-textarea>
								</b-form-group>
								<b-button variant="info" @click="saveInfo">保存</b-button>
							</b-col>
						</b-row>
					</b-container>
				</b-col>
			</b-row>
		</b-container>
	</div>
	
</template>

<script>
	import gl from '../commons/global_variable.js'
	import axios from 'axios'
	import CommonsAlert from '../commons/Alert.vue'
	import PageTitle from '../commons/ContentPageTitle.vue'
	import utils from '../commons/utils.js'
	
	export default {
		name:"MediaDetail",
		components:{
			CommonsAlert,
			PageTitle
		},
		data:function(){
			return {
				message: '',
				dismissCountDown: 0,
				variant: 'success',
				media: {}
			}
		},
		created: function(){
			this.$store.commit('menuFoucsOpr', 'medias')
			var that = this
			axios.get(gl.cms_args.server_url + 'media/detail?id=' + this.$route.params.id).then(function(response){
				var res = response.data
				if (res.code === gl.cms_args.success) {
					var mediaInfo = res.data
					for(var x in mediaInfo){
						that.$set(that.media, x, mediaInfo[x])
					}
				}else{
					that.onQueryError()
				}
			}).catch(function(error){
				that.onQueryError()
			})
		},
		methods:{
			formatDateTime: function(value){
				return utils.wg.formatDateTime(value)
			},
			hFileSize: function(value){
				return utils.wg.hFileSize(value)
			},
			alertDismissed: function(){
				this.dismissCountDown = 0
			},
			onQueryError: function(){
				this.dismissCountDown = 3
				this.variant = 'warning'
				this.message = "查询失败"
			},
			onUpdateSuccess: function(){
				this.dismissCountDown = 3
				this.variant = 'success'
				this.message = '修改成功'
			},
			onUpdateError: function(){
				this.dismissCountDown = 3
				this.variant = 'warning'
				this.message = '修改失败'
			},
			saveInfo: function(){
				var obj = {
					id: this.media.id,
					alt: this.media.alt,
					title: this.media.title,
					remark: this.media.remark
				}
				var that = this
				axios.post(gl.cms_args.server_url + 'media/update', obj).then(function(response){
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.onUpdateSuccess()
					}else{
						that.onUpdateError()
					}
				}).catch(function(error){
					that.onUpdateError()
				})
			}
		}
	}
</script>

<style>
	.label-bolder {
		font-weight: bolder;
		margin-right: 0.3125rem;
	}
	.readonly-area div {
		margin: 0.625rem 0 0 0;
	}
	.image-area {
		text-align: center;
		vertical-align: middle;
		background-color: white;
	}
	.image-area img {
		max-height: 62.5rem;
		max-width: 62.5rem;
		cursor: pointer;
	}
</style>
